<template>
  <div class="suspenSchoolAddContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          休学
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="suspen">
          <el-row :gutter="10" class="suspen_info">
            <el-col :span="6">孩子姓名：赵乐乐</el-col>
            <el-col :span="6">监护人：罗琴</el-col>
            <el-col :span="10">联系电话：18000000000</el-col>
          </el-row>
          <el-row :gutter="10" class="suspen_info">
            <el-col :span="20">所在班级：2019-2020学年 幼小一班</el-col>
          </el-row>
          <el-form label-width="130px">
            <el-form-item label="计划休学时间" :rules="[
      { required: true, message: ''}]">
              <el-date-picker
                style="width:50%;"
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="休学原因">
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="value1"></el-input>
            </el-form-item>
            <el-form-item label="费用处理" style=" margin-bottom: 0rem;">
              <el-radio v-model="value1" :label="1">费用顺延</el-radio>
            </el-form-item>
            <el-form-item style=" margin-bottom: 0rem;">
              <el-radio v-model="value1" :label="2">退费(根据考勤按自然月退)</el-radio>
            </el-form-item>
            <el-form-item style=" margin-bottom: 0rem;">
              <el-checkbox-group v-model="value1" style="margin-left:0.4rem;">
                <el-checkbox :label="1">餐费</el-checkbox>
                <el-checkbox :label="2">学费</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-radio v-model="value1" :label="3">不涉及费用问题</el-radio>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_div">
          <div class="btn_cancel" @click="cancel()">取消</div>
          <div class="btn_sure" @click="sure()">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      value1: ""
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },
    sure() {
      this.$confirm(
        "学员：麦小小    休学时间：2019-12-10至2019-12-30",
        "休学成功",
        {
          center: true,
          confirmButtonText: "确定",
          showCancelButton:false,
          customClass: "customClass",
          type: 'success',
          callback: action => {
            console.log("AAAAAAAAAA");
          }
        }
      );
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dict = tool.getItem(lsKey.dict, true);
  }
};
</script>
<style lang="scss">
.suspenSchoolAddContainer {
  .suspen {
    padding: 0.2rem;
    .suspen_info {
      width: 70%;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 10rem;
}

</style>
<style>
.customClass {
  width: 5rem;
}
</style>





